<template>
    <d2-container :filename="filename">
        <template slot="header">
            <el-form :inline="true" :model="queryParam" class="demo-form-inline">
            </el-form>
        </template>
        <el-table v-loading="listLoading" :data="tableData"
                  border fit highlight-current-row style="width: 100%;">

            <el-table-column label="订单编号" min-width="180" align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </template>
            </el-table-column>

            <el-table-column label="用户编号" width="80" align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.user_id }}</span>
                </template>
            </el-table-column>
            <el-table-column label="租赁类型" width="120"
                             prop="rent_type"
                             align="center"
                             :filters="rentTypeFilterOptions"
                             :filter-method="filterHandler">
                <template slot-scope="scope">
                    <el-tag size="mini" :type="scope.row.rent_type | rentTypeTypeFilter">
                        {{ scope.row.rent_type | rentTypeValueFilter}}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column label="订单状态" width="120"
                             prop="main_status"
                             :filters="statusOptions"
                             :filter-method="filterHandler"
                             align="center">
                <template slot-scope="scope">
                    <el-tag size="mini" :type="scope.row.main_status | statusTypeFilter">
                        {{ scope.row.main_status | statusValueFilter}}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column label="售后状态" width="120" align="center">
                <template slot-scope="scope">
                    <el-tag size="mini" :type="scope.row.after_status | afterStatusTypeFilter">
                        {{ scope.row.after_status | afterStatusValueFilter}}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column label="累计支付金额" width="100" align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.total_fee }}</span>
                </template>
            </el-table-column>

            <el-table-column label="用户订单备注" width="180" align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.user_remark }}</span>
                </template>
            </el-table-column>
            <el-table-column label="发货时间" width="150" align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.delivery_time }}</span>
                </template>
            </el-table-column>

            <el-table-column label="支付时间" width="150" align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.pay_time }}</span>
                </template>
            </el-table-column>

            <el-table-column label="租赁开始时间" width="150" align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.start_time }}</span>
                </template>
            </el-table-column>

            <el-table-column label="租赁结束时间" width="180" align="center">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.overdue ? 'danger': 'type'">
                        {{scope.row.end_time }}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column label="操作" fixed="right" min-width="150px" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" plain icon="el-icon-view"
                               @click="pushDetailPage(scope.row)"
                               type="primary">查看详情
                    </el-button>
                </template>
            </el-table-column>

        </el-table>
        <template slot="footer">
            <pagination v-show="total>0"
                        :total="total"
                        :page.sync="queryParam.current"
                        :limit.sync="queryParam.size"
                        @pagination="getList"/>
        </template>
    </d2-container>
</template>

<script>
  import { page } from '@/api/order/lease-order'
  import Pagination from '@/components/Pagination'
  import { afterStatusKeyValue, rentTypeFilterOptions, rentTypeKeyValue, statusKeyValue, statusOptions } from './common'

  export default {
    name: 'order-list',
    components: {
      Pagination
    },
    filters: {
      statusTypeFilter (status) {
        const statusMap = {
          PENDING_PAYMENT: '',
          PENDING_DELIVERY: 'info',
          PENDING_RECEIVING: 'danger',
          PENDING_RETURNED: 'warning',
          CLOSED: 'success'
        }
        return statusMap[status]
      },
      statusValueFilter (status) {
        return statusKeyValue[status]
      },
      afterStatusTypeFilter (status) {
        const statusMap = {
          NOPE: 'info',
          APPLY: 'warning',
          PROCESSING: 'danger',
          CANCELED: '',
          CLOSED: 'info'
        }
        return statusMap[status]
      },
      afterStatusValueFilter (status) {
        return afterStatusKeyValue[status]
      },
      rentTypeTypeFilter (status) {
        const statusMap = {
          CREDIT: 'success',
          DEPOSIT: 'danger',
        }
        return statusMap[status]
      },
      rentTypeValueFilter (rentType) {
        return rentTypeKeyValue[rentType]
      }
    },
    data () {
      return {
        filename: __filename,
        tableData: [],
        statusOptions: statusOptions,
        rentTypeFilterOptions: rentTypeFilterOptions,
        total: 0,
        listLoading: false,
        queryParam: {
          current: 1,
          size: 10,
          dbName: undefined,
          tableName: undefined
        }
      }
    },
    created () {
      this.getList()
    },
    methods: {
      getList () {
        this.listLoading = true
        page(this.queryParam).then(res => {
          this.tableData = res.records
          this.total = parseInt(res.total)
          this.listLoading = false
        }).catch(() => {
          this.listLoading = false
        })
      },
      pushDetailPage (row) {
        this.$router.push('/order/detail/' + row.id)
      },
      filterHandler (value, row, column) {
        // console.log(value, row)
        const property = column['property']
        return row[property] === value
      }
    }
  }
</script>

<style>

    .el-table .breaking-row {
        background: rgb(253, 226, 226)
    }

</style>
